<template lang="pug">
  div.layout(
    :class="{'layout-fullMap':fullMap,'layout-fullMain':fullMain}")
    slot.layout-main(name="main")
      LayoutMain
        slot(name="form",slot="form")
        slot(name="chart",slot="chart")
        slot(name="datatable",slot="datatable")
    .layout-main-toggle(@click="layoutToggle('fullMain')")
      i.iconfont(:class="{'icon-angle-left': fullMain, 'icon-angle-right': !fullMain}")
    .layout-side
      slot(name="side")
</template>

<script>
import LayoutMain from './LayoutMain'

export default {
  name: 'layout',
  components: {
    LayoutMain
  },
  props: {
    fullMap: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      fullMain: false
    }
  },
  methods: {
    layoutToggle (val) {
      this[val] = !this[val]
    }
  }
}
</script>

<style lang="sass" scoped>
.layout
  display: flex
  width: 100%
  flex: 1
  .layout-side
    width: 20%
    display: flex
    transition: all 0.3s
    overflow: hidden
  .layout-main
    overflow: hidden
  &.layout-fullMain
    .layout-side
      width: 0
  &.layout-fullMap
    .layout-side
      width: 100%
    .layout-main
      width: 0
      padding: 0
    .layout-main-toggle
      width: 0
      border: 0
.layout-main
  display: flex
  flex-direction: column
  flex: 4
  padding: 0 8px
  transition: all 0.3s
.layout-main-toggle
  overflow: hidden
  position: relative
  width: 14px
  background: #fff
  border-left: solid 1px #ccc
  border-right: solid 1px #eee
  cursor: pointer
  transition: all 0.3s
  i
    position: absolute
    bottom: 50%
    left: 0
    font-size: 13px
  // transition: flex 0.3s
  // .layout-map
  //   overflow: hidden
</style>
